<template>
	<div>
		<div style="height:80px;width: 80%;margin: 0 auto;font-size: 20px;line-height: 80px;">信息</div>
		<!-- <el-dialog ref="formRef" :visible.sync="visible" :title="title" v-if="title=='添加商家'||title=='修改商家'" width="900px" :before-close="close"> -->
			<div  style="width: 80%;margin: 0 auto;">
				<el-form :model="form" :rules="rules" ref="formRef" label-width="120px" class="demo-ruleForm">
					<el-row type="flex" :gutter="10">
						<!-- <el-col :span="24">
							<el-form-item label="轮播图" prop="picarr">
							    <elUploadImage v-model="form.picarr" :limit="9"></elUploadImage>
							</el-form-item>
						</el-col> -->
						<el-col :span="12">
							<el-form-item label="商家名称" prop="merch_name">
								<el-input :disabled="true" v-model="form.merch_name" placeholder="请输入商家名称" style="width: 240px;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="!editInfo?.cate_id">
							<el-form-item label="登录账号" prop="username">
								<el-input :disabled="true" v-model="form.username" placeholder="请输入登录账号" style="width:240px"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="!editInfo?.cate_id">
							<el-form-item label="登录密码" prop="password">
								<el-input :disabled="true" v-model="form.password" placeholder="请输入登录密码" style="width:240px"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<!-- 开通角色 1普通会员 2收单商户 -->
							<el-form-item label="开通角色" prop="open_part">
								<el-radio-group v-model="form.open_part"  :disabled="true">
									<el-radio :label="1">普通会员</el-radio>
									<el-radio :label="2">收单商户</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<!-- 会员类型 2个人会员 3企业会员 4个人工商户 -->
							<el-form-item label="会员类型" prop="member_type">
								<el-select v-model="form.member_type" size="small"  :disabled="true" placeholder="请选择会员类型"
									@change="changemember_type" style="width: 240px;margin-right: 10px;">
									<el-option v-for="(item,index) in member_typelist" :key="index" :label="item.title"
										:value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- // is_supermarket  0否 1是 -->
						<el-col :span="12">
							<el-form-item label="是否超市" prop="is_supermarket">
								<el-radio-group v-model="form.is_supermarket"  :disabled="true">
									<el-radio :label="0">否</el-radio>
									<el-radio :label="1">是</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="form.is_supermarket == 1">
							<el-form-item label="超市品牌" prop="supermarket_brand" >
								<el-select v-model="form.supermarket_brand"  :disabled="true">
									<el-option :label="item" :value="index"
										v-for="(item,index) in $store.getters.supermarket_brand_list"
										:key="`s_brand_${item}`"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!--  is_takeaway 是否开启外卖  0否 1是 -->
						<el-col :span="12">
							<el-form-item label="是否开启外卖" prop="is_takeaway">
								<el-radio-group v-model="form.is_takeaway" :disabled="true">
									<el-radio :label="0">否</el-radio>
									<el-radio :label="1">是</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<!-- // is_park 是否停车场 0否 1是 -->
						<el-col :span="12">
							<el-form-item label="是否停车场" prop="is_park">
								<el-radio-group v-model="form.is_park" :disabled="true">
									<el-radio :label="0">否</el-radio>
									<el-radio :label="1">是</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<!-- 外卖配送费shipping_fee -->
						<el-col :span="12" v-if="form.is_takeaway==1">
							<el-form-item label="外卖配送费" prop="shipping_fee">
								<el-input :disabled="true" v-model="form.shipping_fee" placeholder="请输入外卖配送费" style="width: 240px;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="form.member_type!==2">
							<el-form-item label="营业执照注册号" prop="license_no">
								<el-input :disabled="true" v-model="form.license_no" placeholder="请输入营业执照注册号" style="width: 240px;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="联系人" prop="merch_link_man">
								<el-input :disabled="true" v-model="form.merch_link_man" placeholder="请输入联系人" style="width: 240px;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="手机号" prop="mobile">
								<el-input :disabled="true" v-model.number="form.mobile" placeholder="请输入手机号" style="width: 240px;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="分账比例" prop="commission_rate">
								<el-input :disabled="true" v-model="form.commission_rate" type="number" placeholder="请输入分账比例"
									style="width: 240px;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="商家标签" prop="tags">
								<el-input :disabled="true" v-model="form.tags" placeholder="请输入商家标签,用空格分割" style="width: 240px;"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="所属类别" prop="cate_id">
								<!-- <storeCateSelect  style="width: 240px;" v-model="form.cate_id" placeholder="请选择所属类别">
							    </storeCateSelect> -->
								<el-cascader :disabled="true" style="width: 240px;" v-model="form.cate_id" :options="catelist" :props="{
								    value:'id',
								    label:'name',
									emitPath:false
								}"></el-cascader>
							</el-form-item>
						</el-col>
					<!-- 	<el-col :span="12">
							<el-form-item label="所属区域" prop="province_id">
								{{area}}
								<addressSelect  style="width: 240px;" v-model="area" @input="input"></addressSelect>
							</el-form-item>
						</el-col> -->
						<el-col :span="12">
							<el-form-item label="所属楼层" prop="floor">
								<el-select v-model="form.floor" size="small" placeholder="请选择所属楼层"
									style="width: 240px;margin-right: 10px;" :disabled="true">
									<el-option v-for="(item,index) in floorlist" :key="index" :label="item" :value="item">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="门牌号" prop="house_num">
								<el-input :disabled="true" v-model="form.house_num" placeholder="请输入门牌号" style="width:240px"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item label="详细地址" prop="address">
								<el-input :disabled="true" v-model="form.address"></el-input>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="12">
							<el-form-item label="销量" prop="sales_num">
								<el-input-number :disabled="true" v-model="form.sales_num" :step="1" :precision="0"
									style="width:260px"></el-input-number>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="粉丝数" prop="fans_num">
								<el-input-number :disabled="true" v-model="form.fans_num" :step="1" :precision="0"
									style="width:260px"></el-input-number>
							</el-form-item>
						</el-col> -->
						<el-col :span="12">
							<el-form-item label="营业时间" prop="opening_time">
								<el-time-picker :disabled="true" is-range v-model="form.opening_time" value-format="HH:mm:ss" range-separator="至"
									start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围">
								</el-time-picker>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="排序" prop="sort">
								<el-input :disabled="true" v-model="form.sort"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="状态" prop="status">
								<el-radio-group v-model="form.status" :disabled="true">
									<el-radio :label="index" v-for="(item, index) in $store.getters.status"
										:key="`status-${index}`">{{
							            item }}</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="24">
							<el-form-item label="地图" prop="location">
								<maps :location.sync="form.location"></maps>
							</el-form-item>
						</el-col> -->
						<el-col :span="24">
							<el-form-item label="展示图" prop="merch_picarr">
								<div style="display:flex;flex-wrap:wrap;">
									<el-image v-for="(item,index) in form.merch_picarr" style="width:148px;height:148px;margin-right:10px"
									 :src="item.url" :preview-src-list="[item.url]">
									</el-image>
								</div>
								<!-- <elUploadImage v-model="form.merch_picarr" :limit="9"></elUploadImage> -->
								<p style="font-size: 12px;color:gray">第一张为Logo</p>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="营业执照" prop="license_img">
								
								<el-image style="width:148px;height:148px" :src="form.license_img[0].url" :preview-src-list="[form.license_img[0].url]">
								</el-image>
								<!-- <elUploadImage v-model="form.license_img" :limit="1" :class="[showUploadBtn ? '' : 'hidden-Btn']" ></elUploadImage> -->
								<!-- <p style="font-size: 12px;color:gray">第一张为Logo</p> -->
							</el-form-item>
						</el-col>
						<!-- <el-col :span="24">
							<el-form-item>
								<el-button type="primary" @click="submit">提交</el-button>
								<el-button @click="close">取消</el-button>
							</el-form-item>
						</el-col> -->
						
					</el-row>
				</el-form>
			</div>
		<!-- </el-dialog> -->
	</div>
	
</template>
<script>
	import elUploadImage from '@/components/el-upload-image.vue'
	import addressSelect from '@/components/addressnew.vue'
	import storeCateSelect from '@/components/merchant-cate-select.vue'
	import {
		get,
		post
	} from '@/assets/js/http.js'
	export default {
		components: {
			elUploadImage,
			addressSelect,
			storeCateSelect,
			"maps": () => import("@/components/map/index.vue"),
		},
		props: {
			// editInfo: {
			// 	type: Object,
			// 	default () {
			// 		return null
			// 	}
			// },
			title: {
				type: String,
				default: '编辑'
			},
			// floorlist: {
			// 	type: Array,
			// 	default: []
			// }
		},
		data() {
			var checkAge = (rule, value, callback) => {
				console.log(value, 'value')
				if (value == '') {
					return callback(new Error('分账比例不能为空'));
				}
				setTimeout(() => {
					if (0 > value || value > 1) {
						callback(new Error('必须低于1'));
					} else {
						callback();
					}
				}, 1000);
			};
			return {
				editInfo:{},
				floorlist:[],
				visible: false,
				area: [],
				catelist: [],
				member_typelist: [{
					id: 2,
					title: '个人会员'
				}, {
					id: 3,
					title: '企业会员'
				}, {
					id: 4,
					title: '个人工商户'
				}], //2个人会员 3企业会员 4个人工商户
				form: {
					address: '', //详细地址
					cate_id: '', //所属类别
					city_id: '',
					commission_rate: '', //佣金比例  
					merch_link_man: '', //联系人
					license_no: '', //营业执照号
					merch_picarr: [], //展示图
					picarr: [], //轮播图
					mobile: '', //手机号
					province_id: '',
					merch_name: '', //商家名称
					street_id: '',
					town_id: '',
					sales_num: '',
					fans_num: '',
					opening_time: '',
					sort:'',
					tags: '',
					status: '1',
					username: '', //登录账号
					password: '', //登录密码
					floor: '',
					house_num: '',
					member_type: '',
					open_part: '',
					address_detail: '',
					is_takeaway: null,
					is_supermarket: null,
					is_park: null,
					license_img: [],
					supermarket_brand: ''
				},
				userinfostore_id:'',
				rules: {
					merch_picarr: [{
						required: true,
						message: '请上传展示图'
					}],
					picarr: [{
						required: true,
						message: '请上传轮播图'
					}],
					username: [{
						required: true,
						message: '请输入登录账号',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					// floor: [{ required: true, message: '请输入所属楼层', trigger: 'blur' }],
					// house_num: [{ required: true, message: '请输入门牌号', trigger: 'blur' }],
					cate_id: [{
						required: true,
						message: '请选择所属类别',
						trigger: 'blur'
					}],
					open_part: [{
						required: true,
						message: '请选择开通角色',
						trigger: 'blur'
					}],
					member_type: [{
						required: true,
						message: '请选择会员类型',
						trigger: 'blur'
					}],
					merch_name: [{
						required: true,
						message: '请输入商家名称',
						trigger: 'blur'
					}],
					province_id: [{
						required: true,
						message: '请选择所属区域',
						trigger: 'blur'
					}],
					city_id: [{
						required: true,
						message: '请选择所属区域',
						trigger: 'change'
					}],
					town_id: [{
						required: true,
						message: '请选择所属区域',
						trigger: 'change'
					}],
					commission_rate: [{
						validator: checkAge,
						trigger: 'blur'
					}],
					mobile: [{
							required: true,
							message: "此项为必填项"
						},
						{
							pattern: /^1([38][0-9]|4[014-9]|[59][0-35-9]|6[2567]|7[0-8])\d{8}$/,
							message: "手机号码格式错误"
						}
					],
					merch_link_man: [{
						required: true,
						message: '请输入联系人',
						trigger: 'blur'
					}],
					address: [{
						required: true,
						message: '请输入详细地址',
						trigger: 'blur'
					}],
					sales_num: [{
						required: true,
						message: '请输入销量',
						trigger: 'blur'
					}],
					fans_num: [{
						required: true,
						message: '请输入粉丝数',
						trigger: 'blur'
					}],
					opening_time: [{
						required: true,
						message: '请选择营业时间',
						trigger: 'blur'
					}],
					sort:[{
						required: true,
						message: '请输入排序',
						trigger: 'blur'
					}],
					tags: [{
						required: true,
						message: '请输入商家标签',
						trigger: 'blur'
					}],
					is_takeaway: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
					location: [{
						required: true,
						message: '请输入',
						trigger: 'change'
					}, ],
					is_supermarket: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
					is_park: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
					supermarket_brand: [{
						required: true,
						message: '请选择',
						trigger: 'blur'
					}],
				}
			}
		},
		watch: {
			area() {
				this.form.province_id = this.area[0]
				this.form.city_id = this.area[1]
				this.form.town_id = this.area[2]
				if (this.area[3]) {
					this.form.street_id = this.area[3] ? this.area[3] : 0
				}
				console.log(this.area,'this.area',this.form.province_id)
			},
			editInfo() {
				// if (this.editInfo) {
				// 	this.area = [...[]]
				
				// 	this.form = JSON.parse(JSON.stringify(this.editInfo))
				// 	console.log(this.area,'this.area',this.form)
				// 	this.area = [Number(this.form.province_id) || 0, Number(this.form.city_id) || 0, Number(this.form
				// 		.town_id) || 0]
				// 	console.log(this.area, this.form.province_id)
				// 	this.form.opening_time = this.editInfo.opening_time.split('至')
				// 	if (this.form.merch_picarr) {
				// 		this.form.merch_picarr = this.form.merch_picarr.split(',').map(item => {
				// 			return {
				// 				url: item,
				// 				name: Date.now() + Math.random().toFixed(3) * 1000
				// 			}
				// 		})
				// 	}

				// 	if(this.from.picarr){
				// 		this.from.picarr = this.form.picarr.split(',').map(item => {
				// 		    return {
				// 		        url: item,
				// 		        name: Date.now()+Math.random().toFixed(3)*1000
				// 		    }
				// 		})
				// 	}
				// 	if (this.form.license_img) {
				// 		if (this.form.license_img.length > 0) {
				// 			this.form.license_img = [{
				// 				url: this.form.license_img,
				// 				name: Date.now()
				// 			}]
				// 		}
				// 	}
				// 	console.log(this.form.license_img, 'license_img')
				// 	this.open()
				// }
			}
		},
		mounted() {
			this.userinfostore_id = localStorage.getItem("userinfostore_id")||{}
			console.log(localStorage.getItem("userinfostore_id"),'userinfostore_id')
			if(this.userinfostore_id){
				this.getinfo()
			}
			
			this.getList()
			this.getfloor()
		},
		methods: {
			getfloor(){
				post({
					url:'/api/Wechat/buildFloor'
				}).then(res=>{
					this.floorlist = res
				})
			},
			async getinfo(){
				let data = await get({
					url: '/admin/store.merchant/edit',
					params: {
						id:this.userinfostore_id
					}
				})
				this.editInfo = data.row
				this.editInfo.location = { lat:this.editInfo.latitude,lng:this.editInfo.longitude}
				if(data.row.tags){
					this.editInfo.tags = data.row.tags.split(',')
					this.editInfo.tags = this.editInfo.tags.join(' ')
				}
				if (this.editInfo) {
					this.area = []
				
					this.form = JSON.parse(JSON.stringify(this.editInfo))
					console.log(this.area,'this.area',this.form)
					this.area = [Number(this.form.province_id) || 0, Number(this.form.city_id) || 0, Number(this.form
						.town_id) || 0]
					console.log(this.area, this.form.province_id)
					this.form.opening_time = this.editInfo.opening_time.split('至')
					if (this.form.merch_picarr) {
						this.form.merch_picarr = this.form.merch_picarr.split(',').map(item => {
							return {
								url: item,
								name: Date.now() + Math.random().toFixed(3) * 1000
							}
						})
					}
				
					// if(this.from.picarr){
					// 	this.from.picarr = this.form.picarr.split(',').map(item => {
					// 	    return {
					// 	        url: item,
					// 	        name: Date.now()+Math.random().toFixed(3)*1000
					// 	    }
					// 	})
					// }
					if (this.form.license_img) {
						if (this.form.license_img.length > 0) {
							this.form.license_img = [{
								url: this.form.license_img,
								name: Date.now()
							}]
						}
					}
					console.log(this.form.license_img, 'license_img')
					// this.open()
				}
				// this.form = data.row
				console.log(data,'data',this.form)
			},
			async getList() {
				let data = await get({
					url: '/admin/store.MerchantCate/index',
					params: {
						page: 1,
						limit: 999
					}
				})
				this.catelist = data.list
			},
			// 关闭弹窗
			close() {
				this.area = [...[]]
				console.log(this.area,'this.area1')
				this.form = this.$options.data().form
				this.visible = false
				this.$emit('update:editInfo', null)
			},
			// 打开弹窗
			open() {
				this.visible = true
			},
			// 提交
			submit() {
				this.$refs.formRef.validate(async (valid) => {
					if (valid) {
						if (this.form.member_type !== 2 && !this.form.license_no) {
							this.$message('请输入营业执照注册号')
							return
						}
						if (this.form.member_type !== 2 && !this.form.license_img) {
							this.$message('请上传营业执照')
							return
						}
						this.form.tags = this.form.tags.split(' ')
						this.form.tags = this.form.tags.join(',')
						this.form.cate_id = this.form.cate_id
						this.form.address_detail = this.form.address_detail + this.form.address

						console.log(this.form.cate_id, 'this.form.tags', this.form.address_detail, this.form
							.license_img)
						this.form.latitude = this.form.location.lat
						this.form.longitude = this.form.location.lng
						this.$loading()
						try {
							await post({
								url: this.title == '添加商家' ? '/admin/store.merchant/add' :
									'/admin/store.merchant/edit',
								data: {
									...this.form,
									merch_picarr: this.form.merch_picarr.map(item => item.url).join(
										','),
									license_img: this.form.license_img ? this.form.license_img.map(
										item => item.url).join(',') : '',
									// picarr: this.form.picarr.map(item => item.url).join(','),
									opening_time: this.form.opening_time.join('至')
								},
								// successTip: true,
							}).then(res => {
								if (this.title == '添加商家') {
									console.log(res.data)
									this.drup(res.data)
								}
								// this.$message({
								//     type: 'success',
								//     message: '成功!'
								// });
								this.visible = false
								this.getinfo()
								this.form.address_detail = ''
								this.area =[]
							})


						} finally {
							this.$loading().close()
							this.form.address_detail = ''
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			//选择会员类型
			changemember_type(e) {
				console.log(e, 'e')
				this.form.member_type = e
			},
			input(e) {
				console.log(e, 'e')
				// this.area = e
				this.form.address_detail = e.map(item => item.name).join('')
				// console.log(e,'inpute',this.form.address_detail)
			},
			drup(url) {
				this.$confirm('请在2小时内完成进件资料填写，逾期链接作废?', '提示', {
					confirmButtonText: '去进帐',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					window.open(url)
				}).catch(action => {
					if (action === 'cancel') {
						this.$message({
							type: 'info',
							message: '已取消'
						});
					} else {

					}

				});
			},
		}
	}
</script>
<style>
	.hidden-Btn {
	  /deep/ .el-upload {
	    display: none;
	  }
	}
</style>